<template>
	<view class="searchPosi" v-if="props.type=='search'">
		<view class="searchInput"><u-search shape="square" :clearabled="true" :show-action="false"
				v-model="params.title" placeholder='请输入家居名称' @search="updateParams" @clear="updateParams"></u-search>
		</view>
	</view>
	<view class="findCases">
		<!-- 筛选区域 -->
		<view class="screen" v-if="props.type=='list'">
			<view class="search" @tap="gotoSearch">
				<u-search shape="square" :show-action="false" placeholder='请输入家居名称' disabled></u-search>
			</view>
		</view>

		<!-- 列表 -->
		<!-- 没有数据且未加载时的提示 -->
		<view class="nullData" v-if="arrList.length == 0 && !isLoading">
			<image src="https://img.zhizhuangtong.com/project_media/img/xcx/null.png" mode=""
				:class="props.type=='search'?'addTop':''"></image>
			<text>暂无数据</text>
		</view>

		<!-- 数据列表 -->
		<view class="list" v-else>
			<view class="warter" :class="props.type=='search'?'addTop':''">
				<waterfall column-count="2" column-width="auto" style="width: 100%;display: flex;flex-wrap: wrap;"
					refresher-default-style="none" :refresher-enabled="true" :refresher-triggered="refresherTriggered">

					<cell v-for="(item, index) in arrList" :key="index" style="min-width: 50%;max-width: 50%;">
						<view class="card">
							<view class="row" @click.prevent="onDetails(item.id,item.sku[0].id)">
								<up-lazy-load :image="item.sku[0].img" class="cover" img-mode='widthFix'></up-lazy-load>
								<view class="title">{{ item.title }}</view>
								<view class="tag">
									{{item.sku[0].name}}
								</view>
								<view class="bottomView">
									<view class="flex_row_btw_end">
										<view class="unit">¥</view>
										<view class="price">{{item.sku[0].price}}</view>
									</view>
									<view class="shopping" @click.prevent="addCard(item.sku[0].id)">
										<image src="../../static/home/shopping@2x.png" mode="" class="img"></image>
									</view>
								</view>
							</view>
						</view>
					</cell>

					<view v-if="isLoading" class="load-more-box">
						<text>加载中...</text>
					</view>

					<view v-if="!isLoading && !hasMoreData" class="load-more-box">
						<text>已经到底了</text>
					</view>
				</waterfall>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		listData,
		addCar
	} from '@/api/homeFurnishings.js';
	import {
		ref,
		onMounted,
		defineExpose,
		defineProps,
		watch
	} from 'vue';
	// 数据列表、加载状态和分页参数
	const arrList = ref([]);
	const hasMoreData = ref(true); // 初始化为true，表示还有更多数据
	const props = defineProps({
		type: String,
		title: String
	})
	const params = ref({
		title: '',
		page: 1,
		page_size: 20,
	});

	const refresherTriggered = ref(false); // 初始化为false，触发下拉刷新
	const isLoading = ref(false); // 加载状态

	// 初始化数据
	onMounted(() => {
		if (props.type == 'search') {
			params.value.title = props.title || ''
		} else {
			params.value.title = ''
		}
		queryList();
	});

	const updateParams = () => {

		params.value.page = 1
		arrList.value = [];
		queryList();
	};

	// 请求数据列表
	const queryList = async () => {
		isLoading.value = true; // 设置加载中
		try {
			const res = await listData(params.value);
			if (res.code === 1) {
				if (params.value.page === 1) {
					arrList.value = res.data.list;
				} else {
					arrList.value.push(...res.data.list);
				}

				// 判断是否还有更多数据
				if (res.data.list.length < params.value.page_size) {
					hasMoreData.value = false; // 没有更多数据
				} else {
					hasMoreData.value = true; // 还有更多数据
				}
				params.value.page += 1; // 页码递增
			}
			setTimeout(() => {
				isLoading.value = false;
			}, 500);
		} catch (error) {
			console.error('请求数据失败:', error);
		} finally {
			isLoading.value = false; // 加载完成
		}
	};

	// 重置查询条件并重新加载数据
	const update = () => {
		params.value.title = '';
		params.value.page = 1;
		queryList();
	};
	const updateHasQuery = () => {
		params.value.page = 1;
		queryList();
	};
	// 去详情
	const onDetails = (id, skuId) => {
		uni.navigateTo({
			url: '/pages/find/homeFurnish/index?id=' + id + '&skuId=' + skuId
		});
	}
	//加入购物车
	const addCard = async (id) => {
		let goods = [{
			sku_id: id,
			num: 1
		}]
		const res = await addCar({
			goods: JSON.stringify(goods)
		});
		if (res.code === 1) {
			wx.showToast({
				title: res.msg,
				icon: 'none',
				duration: 2000
			});
		}
	}
	//查询
	const gotoSearch = () => {
		uni.navigateTo({
			url: '/pages/find/homeFurnishSearchHistory/index'
		});
	}
	// 对外暴露方法
	defineExpose({
		queryList,
		params,
		update,
		hasMoreData,
		updateHasQuery
	});
</script>




<style scoped lang="less">
	.searchPosi {
		position: fixed;
		z-index: 999999;
		background-color: #fff;
		width: 100%;
		justify-content: center;
		height: 118rpx;
		display: flex;
		align-items: center;
		top: 0;

		.searchInput {
			width: calc(100% - 60rpx);
		}
	}

	.findCases {
		width: 100%;
		height: 100%;

		.screen {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;

			.search {
				width: calc(100% - 40px);
				padding: 50rpx 1px 0;
				margin-left: 40rpx;
			}
		}

		.nullData {
			height: calc(100% - 110rpx);
		}

		.list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 10px;
			box-sizing: border-box;

			.warter {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;

				.card {
					display: flex;
					padding: 26rpx 14rpx 0rpx;
					// margin-bottom: 25rpx;
					// background-color: #fff;
					width: 100%;
					border-radius: 16rpx;
					box-sizing: border-box;

					.row {
						border-radius: 16rpx;
						box-sizing: border-box;
						width: 100%;
						background-color: #fff;
						box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.05);
						display: flex;
						flex-wrap: wrap;

						.cover {
							width: 100%;

							background-color: #fff;

							::v-deep(.u-lazy-item) {
								overflow: hidden;
								box-sizing: border-box;
								border-top-left-radius: 16rpx;
								border-top-right-radius: 16rpx;

								image {
									width: 100%;
									border-top-left-radius: 16rpx;
									border-top-right-radius: 16rpx;
									object-fit: cover !important;
									box-sizing: border-box;
									background-color: #fff;
								}
							}
						}

						::v-deep(.u-wrap) {
							width: 100%;
							height: 100%;
						}


						.title {
							width: 90%;
							height: 50rpx;
							margin-top: 5rpx;
							letter-spacing: 0.5px;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							line-height: 50rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							overflow: hidden;
							margin-left: 16rpx;
							text-overflow: ellipsis;
							/* 显示省略号 */
						}

						.tag {
							margin-left: 16rpx;
							width: 90%;
							display: flex;
							margin-top: 5rpx;
							// height: 60rpx;
							// padding: 0 4rpx;
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #7A7A7A;
							line-height: 30rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							display: -webkit-box;
							/* 必须结合WebKit浏览器 */
							-webkit-line-clamp: 1;
							/* 限制显示的行数 */
							-webkit-box-orient: vertical;
							/* 垂直排列盒子 */
							overflow: hidden;
							/* 隐藏超出部分 */
							text-overflow: ellipsis;
							/* 显示省略号 */
						}

						.bottomView {
							margin-left: 16rpx;
							margin-right: 16rpx;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							width: 100%;
							padding-bottom: 20rpx;
							margin-top: 10rpx;

							.unit {
								font-weight: 500;
								font-size: 22rpx;
								color: #333333;
							}

							.price {
								font-weight: 500;
								font-size: 30rpx;
								color: #333333;
							}

							.shopping {
								width: 45rpx;
								height: 45rpx;

								.img {
									width: 45rpx;
									height: 45rpx;
								}
							}
						}
					}
				}
			}
		}

		.load-more-box {
			text-align: center;
			width: 100%;
			padding-top: 20rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			color: #7A7A7A;
		}
	}

	.addTop {
		margin-top: 120rpx;
	}
</style>